<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>K3D</title>
  <script src="node_modules/requirejs/require.js"></script>
  <script src="dist/standalone.js?k3d"></script>
  <style>
    body, html {
      background-color: #F5F5F5;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

    #canvasTarget {
      width: 100%;
      height: 100%;
      position: absolute;
    }
  </style>
</head>
<body>
<div id="canvasTarget"></div>
<script>
  var K3DInstance;

  function fileLoader(url, callback) {
    var xhrLoad = new XMLHttpRequest();
    xhrLoad.responseType = "arraybuffer";
    xhrLoad.open('GET', url, true);

    xhrLoad.onreadystatechange = function () {
      if (xhrLoad.readyState === 4) {
        callback(xhrLoad.response);
      }
    };

    xhrLoad.send(null);
  }

  require(['k3d'], function (lib) {

    // try {
    //   K3DInstance = new lib.K3D(
    //     lib.ThreeJsProvider,
    //     document.getElementById('canvasTarget'),
    //   );
    // } catch (e) {
    //   console.log(e);
    //   return reject(e);
    // }

    fileLoader('dump.k3d', function (data) {
      K3DInstance = lib.CreateK3DAndLoadBinarySnapshot(
        data,
        document.getElementById('canvasTarget')
      ).then(function (ret) {
        K3DInstance = ret;

        // setTimeout(function () {
        //   K3DInstance.resetCamera(1.5);
        // }, 500);

        // K3DInstance.on(K3DInstance.events.OBJECT_HOVERED, (params) => {
        //   console.log(params);
        // });

        // setTimeout(function () {
        //   let jsons = ret.getWorld().ObjectsListJson;
        //
        //   Object.keys(jsons).forEach(function(id) {
        //     jsons[id].group = null;
        //     K3DInstance.reload(jsons[id], {group: null});
        //   });
        // }, 5000);
      });
    });
  });
</script>
</body>
</html>
